import React from 'react'
import {
    HashRouter,  //路由模式 ：嵌套路由模式要跟随上级路由模式
    Switch,      //将路由设置为排它路由
    Route, //路由对象
    Link
} from 'react-router-dom'  //定义一个路由

import '../css/Home.css' //移入css

import Pany from './Pany'
import Team from './Team'
import Culture from './Culture'
import Crow from './Crow'
import News from './News'
import Join from './Join'
import Relationship from './Relationship'
import Wes from './Wes'


//路由应该是组件的一部分 

class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        // console.log(this);
        return (
            <HashRouter>
                <div className="big">
                    <div className="box">
                        <ul className="ul_box">
                            <li>小米商城</li>
                            <li>MIUI</li>
                            <li>loT</li>
                            <li>云服务</li>
                            <li>天星数科</li>
                            <li>有品</li>
                            <li>小爱开发平台</li>
                            <li>企业团购</li>
                            <li>资质证照</li>
                            <li>协议规则</li>
                            <li>下载app</li>
                            <li>智能生活</li>
                            <li>Select  Location</li>
                        </ul>
                        <ol className="ol_box">
                            <li><Link to="/About">登录</Link></li>
                            <li>注册</li>
                            <li>消息通知</li>
                            <li>购物车</li>
                        </ol>
                    </div>

                    <div className="nav_box">
                        <img src="http://s02.mifile.cn/assets/static/image/mi-logo.png" className="img_bar" />
                        <ul className="ul_min">
                            <li>全部商品分类</li>
                            <li>小米手机</li>
                            <li>Redmi红米</li>
                            <li>电视</li>
                            <li>笔记本</li>
                            <li>家电</li>
                            <li>路由器</li>
                            <li>智能硬件</li>
                            <li>服务</li>
                            <li>社区</li>
                        </ul>
                        <input type="next" className="input_box" />
                        <button className="btn">🔍</button>
                    </div>
                    <ul className="ul_max">
                        <li>首页 &emsp;/</li>
                        <li>&emsp;关于小米  &emsp;/</li>
                        <li>&emsp;管理团队  &emsp;/</li>
                    </ul>
                    <div>
                        <ul className="ul_foot">
                            
                                <li><Link to="/Pany">公司简介</Link></li>
                                <li><Link to="/Team">管理团队</Link></li>
                                <li><Link to="/Culture">小米文化</Link></li>
                                <li><Link to="/Crow">发展经历</Link></li>
                                <li><Link to="/News">小米新闻</Link></li>
                                <li><Link to="/Join">加入小米</Link></li>
                                <li><Link to="/Relationship">投资者关系</Link></li>
                                <li><Link to="/Wes">联系我们</Link></li>
                            
                        </ul>
                    </div>
                    <div>
                        <Switch>
                            
                            <Route path="/Team" component={Team} />
                            <Route path="/Culture" component={Culture} />
                            <Route path="/Crow" component={Crow} />
                            <Route path="/News" component={News} />
                            <Route path="/Relationship" component={Relationship} />
                            <Route path="/Join" component={Join} />
                            <Route path="/Wes" component={Wes} />
                            <Route path="/" component={Pany} />
                        </Switch>
                    </div>
                </div>
            </HashRouter>
        )

    }
}
export default Home